<!--
  @author: cqz
  @desc: 数据表选择通用组件 树形
  @date: 2020-6-13
-->
<template>
  <div ref="divContainer">
    <el-input v-model="filterText"
              prefix-icon="el-icon-search"
              placeholder="筛选"
              clearable size="small" style="margin-bottom: 5px;"
              maxlength="30"></el-input>
    <el-scrollbar ref="scroll"
                  :style="{ height: domHeight + 'px'}">
      <el-tree :data="this.tableList"
               :props="this.tableListProps" :filter-node-method="filterNode"
               node-key="id"
               ref="tableList"
               @current-change="currentChangeHandler"
               :check-on-click-node="true"
               :default-expand-all="false"
               :highlight-current="true">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <span class="node-icon">
            <svg-icon icon-class="icon-datasource" v-if="node.level===2"></svg-icon>
              <svg-icon icon-class="icon-table" v-else-if="node.level>2"></svg-icon>
              <svg-icon icon-class="icon-opened" v-else-if="node.expanded"></svg-icon>
              <svg-icon icon-class="icon-closed" v-else="!node.expanded"></svg-icon>
          </span>
          <span>
            {{ data.type === '1' ? (data.remark === data.name ? data.remark : data.remark + '(' + data.name + ')') : data.remark }}
          </span>
        </div>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import { treeDataTranslate } from '../../../utils/index'

export default {
  props: {
  },
  components: {
  },
  watch: {
    filterText (val) {
      this.$refs.tableList.filter(val)
    }
  },
  mounted () {
    this.$nextTick(function () {
      var heightCss = window.getComputedStyle(this.$refs.divContainer).height
      if (heightCss === 'auto') {
        this.domHeight = document.documentElement['clientHeight'] - 226
      }
    })
  },
  computed: {

  },
  data () {
    return {
      domHeight: 360,
      filterText: '',
      tableList: [],
      tableListProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.filterText = ''
      this.$http({
        url: this.$http.adornUrl(`/src/table/tree`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.tableList = treeDataTranslate(data.tree, 'id')
        } else {
          this.tableList = []
        }
      })
    },
    /***
     * 外部设置过滤
     * @text
     */
    filter (text) {
      this.filterText = text
    },
    currentChangeHandler (data, node) {
      if (node.level === 2) {
        this.$emit('srcSelectHandler', data)
      } else if (node.level === 3) {
        this.$emit('tableSelectHandler', data, node)
      }
    },
    /***
     * 根据节点ID获取节点名称
     * @param id
     */
    getName (id) {
      var node = this.$refs.tableList.getNode(id)
      if (node) {
        this.$refs.tableList.setCurrentKey(id)
        return node.data.name
      }
      return ''
    },
    /***
     * 树节点过滤
     */
    filterNode (value, data) {
      if (!value) return true
      var values = []
      if (value.indexOf(',') > -1) {
        value = value.toLowerCase()
        values = value.split(',')
      } else {
        values.push(value)
      }
      for (var i = 0; i < values.length; i++) {
        if (data.name.toLowerCase().indexOf(values[i]) !== -1 || data.remark.toUpperCase().indexOf(values[i]) !== -1) {
          return true
        }
      }
    }
  }
}
</script>

